<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Group4 UniHub</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/components.css">
    <link rel="stylesheet" href="../styles/noticeboard.css">
    <link rel="stylesheet" href="../styles/auth.css">
</head>
<body>
    <div id="header">
        <app-header page-title="Welcome to UniHub" header-image="../assets/images/header_group.png"></app-header>
    </div>
    
    <div class="main-container auth-container">
        <div class="auth-content">
            <div class="auth-forms">
                <!-- Login Form -->
                <form id="loginForm" class="auth-form active">
                    <h2>Login</h2>
                    <div class="form-group">
                        <label for="loginEmail">Email:</label>
                        <input type="email" id="loginEmail" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">Password:</label>
                        <input type="password" id="loginPassword" name="password" required>
                    </div>
                    <div class="error-message" style="display: none; color: #ff4d4f; "></div>
                    <button type="submit" class="auth-btn">Login</button>
                    <p class="switch-text">Don't have an account? <a href="#" class="switch-link" data-target="registerForm">Register Now</a></p>
                </form>

                <!-- Register Form -->
                <form id="registerForm" class="auth-form">
                    <h2>Register</h2>
                    <div class="form-group">
                        <label for="registerUsername">Username:</label>
                        <input type="text" id="registerUsername" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="registerEmail">Email:</label>
                        <input type="email" id="registerEmail" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">Password:</label>
                        <input type="password" id="registerPassword" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">Confirm Password:</label>
                        <input type="password" id="confirmPassword" name="confirmPassword" required>
                        <span class="password-error" style="display: none; color: #ff4d4f; font-size: 0.85em;">Passwords do not match</span>
                    </div>
                    <div class="error-message" style="display: none; color: #ff4d4f; "></div>
                    <button type="submit" class="auth-btn">Register</button>
                    <p class="switch-text">Already have an account? <a href="#" class="switch-link" data-target="loginForm">Login Now</a></p>
                </form>
            </div>
            <div class="auth-image">
                <img src="../assets/images/header_post.png" alt="Campus Logo">
            </div>
        </div>
    </div>

    <div id="footer"></div>

    <script src="../components/header.js"></script>
    <script src="../components/footer.js"></script>
    <script type="module" src="../scripts/auth.js"></script>
</body>
</html> 